<div class="panel b text-white">
    <div class="panel-body bg-cover clearfix" style="background-image: url(assets/img/profile-bg.jpg)">
        <div class="media mt0">
            <div class="media-left">
                <a>
                    <img class="media-object img-thumbnail img-circle thumb96" src="assets/img/user/06.jpg" alt="Image" />
                </a>
            </div>
            <div class="media-body media-middle">
                <div class="clearfix">
                    <div class="pull-left">
                        <h4 class="media-heading m0">Claire Beck</h4>
                        <p>Team lead</p>
                        <button class="btn btn-info btn-xs" type="button" (click)="following = !following">{{following ? "Following" : "Follow"}}</button>
                    </div>
                    <div class="pull-right">
                        <div class="inline text-center mr">
                            <div class="h3 m0">
                                <strong>1.4k</strong>
                            </div>
                            <small>followers</small>
                        </div>
                        <div class="inline text-center mr">
                            <div class="h3 m0">
                                <strong>350</strong>
                            </div>
                            <small>pictures</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row-masonry row-masonry-lg-2">
    <div class="col-masonry">
        <div class="panel b m0">
            <div class="panel-heading">
                <div class="pull-right">
                    <div class="btn-group" dropdown>
                        <button class="btn btn-link" dropdownToggle>
                            <em class="fa fa-ellipsis-v fa-lg text-muted"></em>
                        </button>
                        <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
                            <li>
                                <a>
                                    <span>Hide this</span>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <span>Share</span>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <span>Block user</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="media mt0">
                    <div class="media-left">
                        <a>
                            <img class="media-object img-thumbnail img-circle thumb32" src="assets/img/user/03.jpg" alt="Image" />
                        </a>
                    </div>
                    <div class="media-body media-middle">
                        <h5 class="media-heading m0 text-bold">Raymond Clark</h5>
                        <small class="text-muted">yesterday</small>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-4 text-center mb-lg">
                        <a>
                            <img class="img-responsive img-thumbnail" src="assets/img/bg8.jpg" alt="Image" />
                        </a>
                    </div>
                    <div class="col-lg-8">
                        <h4 class="media-heading">Lorem Ipsum</h4>
                        <p>Fusce at enim eget nibh convallis elementum. Duis a neque odio, at varius elit. Suspendisse ullamcorper eros eget augue ultrices feugiat. Phasellus dictum nisi eu ipsum fermentum rhoncus. Mauris eu lacus massa, vel condimentum lectus..</p>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <form class="mt" method="post" action="">
                    <textarea class="form-control no-resize" placeholder="Comment..." rows="1"></textarea>
                </form>
            </div>
        </div>
    </div>
    <div class="col-masonry">
        <div class="panel b m0">
            <div class="panel-heading">
                <div class="pull-right">
                    <a class="text-muted">
                        <em class="fa fa-thumbs-o-up fa-fw"></em>
                        <span>(32)</span>
                    </a>
                </div>
                <div class="media mt0">
                    <div class="media-left">
                        <a>
                            <img class="media-object img-thumbnail img-circle thumb32" src="assets/img/user/08.jpg" alt="Image" />
                        </a>
                    </div>
                    <div class="media-body media-middle">
                        <h5 class="media-heading m0 text-bold">Kelly Vargas</h5>
                        <small class="text-muted">3 days</small>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <p>Curabitur dignissim dapibus nisl sed iaculis.</p>
                <p>
                    <a>
                        <img class="img-responsive img-thumbnail" src="assets/img/bg10.jpg" alt="Image" />
                    </a>
                </p>
                <p>
                    <em class="fa fa-comment-o fa-fw"></em>
                    <span>(9)</span>
                </p>
                <div class="media">
                    <small class="pull-right text-muted">12m ago</small>
                    <div class="media-left">
                        <img class="media-object img-circle thumb32" src="assets/img/user/05.jpg" alt="Image" />
                    </div>
                    <div class="media-body">
                        <span class="media-heading">
                     <p class="m0">
                        <a href="#">
                           <strong>Aiden Curtis</strong>
                        </a>
                     </p>
                     <p class="m0 text-muted">Hey looks great!</p>
                  </span>
                    </div>
                </div>
                <div class="media">
                    <small class="pull-right text-muted">30m ago</small>
                    <div class="media-left">
                        <img class="media-object img-circle thumb32" src="assets/img/user/08.jpg" alt="Image" />
                    </div>
                    <div class="media-body">
                        <span class="media-heading">
                     <p class="m0">
                        <a href="#">
                           <strong>William Stevens</strong>
                        </a>
                     </p>
                     <p class="m0 text-muted">Excellento shot!</p>
                  </span>
                    </div>
                </div>
                <div class="media">
                    <small class="pull-right text-muted">30m ago</small>
                    <div class="media-left">
                        <img class="media-object img-circle thumb32" src="assets/img/user/04.jpg" alt="Image" />
                    </div>
                    <div class="media-body">
                        <span class="media-heading">
                     <p class="m0">
                        <a href="#">
                           <strong>James Payne</strong>
                        </a>
                     </p>
                     <p class="m0 text-muted">Nice shot!</p>
                  </span>
                    </div>
                </div>
            </div>
            <div class="panel-body bg-gray-lighter"><a class="link-unstyled">Load (6) more comments</a>
            </div>
            <div class="panel-body">
                <form class="mt" method="post" action="">
                    <textarea class="form-control no-resize" placeholder="Comment..." rows="1"></textarea>
                </form>
            </div>
        </div>
    </div>
    <div class="col-masonry">
        <div class="panel b m0">
            <div class="panel-body">
                <form class="mb mt" method="post" action="">
                    <textarea class="form-control" rows="4" placeholder="Post a new comment.."></textarea>
                </form>
                <div class="clearfix">
                    <div class="pull-left">
                        <ul class="nav nav-pills">
                            <li>
                                <a href="#">
                                    <em class="fa fa-location-arrow"></em>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <em class="fa fa-photo"></em>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <em class="fa fa-video-camera"></em>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="pull-right">
                        <button class="btn btn-success" type="button">Post</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-masonry">
        <div class="panel b m0">
            <div class="panel-heading">
                <div class="pull-right">
                    <a class="inline">
                        <img class="img-circle thumb24" src="assets/img/user/05.jpg" alt="member" />
                    </a>
                    <a class="inline">
                        <img class="img-circle thumb24" src="assets/img/user/06.jpg" alt="member" />
                    </a>
                    <a class="inline">
                        <img class="img-circle thumb24" src="assets/img/user/07.jpg" alt="member" />
                    </a>
                </div>
                <div class="media mt0">
                    <div class="media-left">
                        <a>
                            <img class="media-object img-thumbnail img-circle thumb32" src="assets/img/user/04.jpg" alt="Image" />
                        </a>
                    </div>
                    <div class="media-body media-middle">
                        <h5 class="media-heading m0 text-bold">Travis Horton</h5>
                        <small class="text-muted">3 minutes</small>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu odio vitae augue elementum molestie sed quis turpis.</p>
                    <footer>Someone famous in
                        <cite title="Source Title">Source Title</cite>
                    </footer>
                </blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>
    <div class="col-masonry">
        <div class="panel b m0">
            <div class="panel-heading">
                <div class="media">
                    <div class="media-left">
                        <a>
                            <img class="media-object img-thumbnail img-circle thumb32" src="assets/img/user/08.jpg" alt="Image" />
                        </a>
                    </div>
                    <div class="media-body media-middle">
                        <h5 class="media-heading m0 text-bold">Kelly Vargas</h5>
                        <small class="text-muted">3 days</small>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <p>
                    <a>
                        <img class="img-responsive img-thumbnail" src="assets/img/bg3.jpg" alt="Image" />
                    </a>
                </p>
                <p>Curabitur dignissim dapibus nisl sed iaculis.</p>
            </div>
        </div>
    </div>
    <div class="col-masonry">
        <div class="panel b m0">
            <div class="panel-heading">
                <div class="pull-right">
                    <div class="btn-group" dropdown>
                        <button class="btn btn-link" dropdownToggle>
                            <em class="fa fa-ellipsis-v fa-lg text-muted"></em>
                        </button>
                        <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
                            <li>
                                <a>
                                    <span>Hide this</span>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <span>Share</span>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <span>Block user</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="media mt0">
                    <div class="media-left">
                        <a>
                            <img class="media-object img-thumbnail img-circle thumb32" src="assets/img/user/03.jpg" alt="Image" />
                        </a>
                    </div>
                    <div class="media-body media-middle">
                        <h5 class="media-heading m0 text-bold">Elmer Thomas</h5>
                        <small class="text-muted">3 minutes</small>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <p>I'm the big picture guy! xD</p>
            </div>
            <div class="panel-body">
                <a class="inline">
                    <img class="img-circle thumb48" src="assets/img/user/03.jpg" alt="member" />
                </a>
                <a class="inline">
                    <img class="img-circle thumb24" src="assets/img/user/02.jpg" alt="member" />
                </a>
                <a class="inline">
                    <img class="img-circle thumb24" src="assets/img/user/06.jpg" alt="member" />
                </a>
                <a class="inline">
                    <img class="img-circle thumb24" src="assets/img/user/07.jpg" alt="member" />
                </a>
                <a class="inline">
                    <img class="img-circle thumb24" src="assets/img/user/08.jpg" alt="member" />
                </a>
                <a class="inline">
                    <img class="img-circle thumb24" src="assets/img/user/09.jpg" alt="member" />
                </a>
            </div>
            <div class="panel-body">
                <form class="mb mt" method="post" action="">
                    <textarea class="form-control no-resize" placeholder="Comment..." rows="1"></textarea>
                </form>
                <div class="clearfix">
                    <div class="pull-left">
                        <ul class="nav nav-pills">
                            <li>
                                <a href="#">
                                    <em class="fa fa-location-arrow"></em>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <em class="fa fa-photo"></em>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <em class="fa fa-video-camera"></em>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="pull-right">
                        <button class="btn btn-success btn-sm" type="button">Post</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="text-center mv-lg">
    <button class="btn btn-default btn-oval btn-lg" type="button">Load more..</button>
</div>
